<script lang="ts" setup>
import store from "@/store";
import router from '@/router'
import {onMounted, onUnmounted, ref} from "vue";
import SvgIcon from "@/components/svg-icon/index.vue";

const {applets} = store.userStore;
const toUrl = (icon: string) => {
    if (icon.indexOf('.png') !== -1) {
        return new URL(`/src/assets/images/${icon}`, import.meta.url).href
    } else {
        return new URL(`/src/assets/icons/svg/${icon}`, import.meta.url).href
    }
}
const open = (app: any) => {
    router.push({path: app.path})
}
const defaultWidth = ref('--applet-width: 120px');
const observer = new ResizeObserver((entries: any) => {
    for (let entry of entries) {
        const { width } = entry.contentRect;
        const count = Math.ceil(width / 150);
        defaultWidth.value = `--applet-width: ${(width - (count - 1) * 15) / count}px`;
    }
});


onMounted(() => {
    observer.observe(document.getElementsByClassName('applet-mode')[0] as Element);
});

onUnmounted(() => {
    observer.disconnect(); // 移除监听事件
});
</script>
<template>
    <main-page>
        <div class="applet-mode" :style="defaultWidth">
            <div class="applet-item" v-for="(item, index) in applets" :key="index">
                <el-icon :size="100">
                    <svg-icon :icon="item.icon"/>
                </el-icon>
                <el-text style="width: 100%;text-align: center;position: absolute;bottom: -25px" truncated>
                    {{ item.title }}
                </el-text>
                <span class="applet-list__item-actions">
                <el-icon :size="25">
                    <svg-icon icon="el-icon-switch-button" @click="open(item)"/>
                </el-icon>
            </span>
            </div>
        </div>
    </main-page>
</template>
<style lang="scss" scoped>
.applet-mode {
    display: grid;
    padding: 5px;
    grid-template-columns: repeat(auto-fill, var(--applet-width));
    justify-content: center;
    row-gap: 35px;
    column-gap: 15px;
    width: 100%;

    .applet-item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        height: var(--applet-width);
        border:1px solid var(--el-border-color);
        position: relative;
        border-radius: var(--el-border-radius-round)
    }

    .applet-list__item-actions {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        cursor: default;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        opacity: 0;
        font-size: 20px;
        border-radius: var(--el-border-radius-round);
        background-color: var(--el-overlay-color-lighter);
        transition: opacity var(--el-transition-duration);
    }

    .applet-list__item-actions:hover {
        opacity: 1;
    }

    .applet-list__item-actions i+i {
        margin-left: 1rem;
    }

    .applet-list__item-actions i:hover {
        cursor: pointer;
    }
}
</style>